<template>
  <!-- 模板信息属性 -->
  <div class="detailInfo">
    <!-- 标题 -->
    <!-- <div class="title"><h3>详情页信息</h3></div> -->
    <!-- 模板信息 -->
    <div class="info">
      <div class="item">
        <div class="label"><span class="mark">*</span>模板名称：</div>
        <div class="infoCon">
          <el-input v-model="list.modelName" maxlength="32" placeholder="请输入模板名称" :disabled="ispreview"></el-input>
        </div>
      </div>
      <div class="item">
        <div class="label"><span class="mark">*</span>模板类型：</div>
        <div class="infoCon">
          <el-select v-model="list.modelType" placeholder="请选择模板类型" :disabled="ispreview">
            <el-option v-for="item in optionsType" :key="item.value"
              :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="item">
        <div class="label"><span class="mark">*</span>模板分类：</div>
        <div class="infoCon">
          <el-select v-model="list.modelBuss" placeholder="请选择模板分类" :disabled="ispreview">
            <el-option v-for="item in optionsBuss" :key="item.value"
              :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="item">
        <div class="label"><span class="mark">*</span>模板标记：</div>
        <div class="infoCon">
          <el-input v-model="list.modelSign" :disabled="ispreview" clearable placeholder="请输入模板标记"
            @input="onInput(list.modelSign)" @blur="onBlur(list.modelSign)">
          </el-input>
          <div id="msg" style="color:red;display:none;">请不要输入中文!</div>
        </div>
      </div>
      <div class="item">
        <div class="label">模板备注：</div>
        <div class="infoCon">
          <el-input v-model="list.modelSignAdd" :disabled="ispreview"></el-input>
        </div>
      </div>
      <div class="item">
        <div class="label">模板说明：</div>
        <div class="infoCon">
          <el-input type="textarea" :rows="3" v-model="list.modelDetails" :disabled="ispreview"></el-input>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'detailInfo',
  components: {},
  props: {
    modelData:{
      type: Object,
      default: () =>{}
    },
    ispreview:{
      type:Boolean,
      default: false
    }
  },
  data() {
    return {
      list: this.modelData,
      isPreview: false,
      dialogImageUrl:'',
      optionsType:[
        { value: 3, label: '普通模板' },
      ],
      optionsBuss:[
        { value: 1, label: '首页' },
        { value: 2, label: '影视专区' },
        { value: 3, label: '非影视专区' },
        { value: 4, label: '专题模板' },
        { value: 5, label: '详情页' },
      ],
      optionsPosition:[
        { value: 2, label: '第一屏' },
        { value: 1, label: '其他位置' },
      ],
      // 中文校验
      reg: /[\u4E00-\u9FA5]/g,
    }
  },
  methods: {
    // 中文校验
    onInput(val){
      if(this.reg.test(val) == true){
        document.getElementById('msg').style.display = 'block';
      } else {
        document.getElementById('msg').style.display = 'none';
      }
    },
    // 如果是中文，失焦是值为空
    onBlur(val){
      if(this.reg.test(val) == true){
        this.list.modelSign = "";
        document.getElementById('msg').style.display = 'none';
      }
    },
    // 上传模板截图
    getImgList(data){
      this.list.viewImg = data.url;
      this.list.name = data.name;
    },
    // 模板既截图
    toImage(){
      this.$emit('toImage')
    },
    // 删除图片
    removeImage(){
      this.list.viewImg = "";
    },
    // 预览图片
    preview(val){
      this.isPreview = true;
      this.dialogImageUrl = val;
    }
  }
}
</script>

<style lang="less" scoped>
.detailInfo{
  margin-top: 15px;
  // 标题
  .title{
    padding: 0 15px;
    h3{
      font-size: 18px;
      color: #333;
      font-weight: bold;
    }
  }
  // 模板信息
  .info{
    margin: 10px 5px 10px 0px;
    .item{
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      padding: 10px;
      margin-left: 8px;
      border-bottom: 1px dashed #dbdbdb;
      &:nth-last-child(1){
        border: none;
      }
      .label{
        width: 80px;
        display: flex;
        justify-content: flex-end;
        color: #CFCFD2;
        .mark{
          color: red;
          margin-right: 2px;
          font-weight: normal;
        }
      }
      .infoCon{
        width: calc(100% - 80px);
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
      }
    }
  }
  // 海报列表
  .imageList{
    overflow: auto;
    background: #f7f8f9;
    border-radius: 4px;
    margin: 0 10px 0 30px;
    padding: 5px 10px;
    .deleteBtn{
      display: flex;
      justify-content: flex-end;
      align-items: center;
      .el-icon-close{
        color: #999;
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 6px;
        cursor: pointer;
        &:hover{
          color: red;
        }
      }
    }
    .flexRow{
      display: flex;
      align-items: center;
      justify-content: space-between;
      .info{
        width: calc(100% - 70px);
      }
      .btnImage{
        text-align: right;
        .preimg{
          width: 50px;
          height: 50px;
          border-radius: 5px;
          overflow: hidden;
          position: relative;
          background: #fff;
          display: flex;
          justify-content: center;
          align-items: center;
          &::before{
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,.5);
            opacity: 0;
            transition: all .3s;
          }
          span{
            position: absolute;
            top: 50%;
            left: 50%;
            color: #fff;
            transform: translate(-50%, -50%);
            font-size: 20px;
            cursor: pointer;
            opacity: 0;
            transition: all .3s;
          }
          img{
            max-width: 100%;
          }
          &:hover{
            &::before, span{
              opacity: 1;
            }
          }
        }
      }
    }
  }
}
</style>